<template>
  <div>
    <div class="app">
      <div class="demo"></div>
    </div>
    <div class="ceshi"></div>
    <div class="left_sj"></div>
    <div class="w-3"></div>
    <div class="w-4"></div>
    <div class="w-5"></div>
  </div>
</template>

<script>
export default {
  data () {
    return {}
  },
  methods: {}
}
</script>

<style scoped lang='scss'>
// 1. 变量是以$开头的
// 2. sass中可以写嵌套语法
// 3. 父选择器&符
$c: red;
.app {
  .demo {
    width: 200px;
    height: 200px;
    background-color: $c;
    // 父选择器
    // 加了&符的意思 .demo:hover交集选择器
    // 不加&符的意思 .demo :hover后代选择器
    // 加了&符号相当前下面的选择器上父级选择器指向同一个元素
    &:hover {
      background-color: blue;
    }
  }
}

@mixin sj($direction,$c,$w) {
  width: 0;
  height: 0;
  border: $w solid transparent;
  @if $direction == left {
    border-right-color: $c;
  }@else if $direction == right{
    border-left-color: $c;
  }
  @else if $direction == top{
    border-bottom-color: $c;
  }@else{
    border-top-color: $c;
  }
}

.left_sj{
  @include sj(left,red,20px);
}

// .w1 分1份  .w3 分三份 .w5 20%
@for $i from 1 through 10{
  .w-#{$i}{
    width:100% /$i;
  }
}

// 混入使用场景：可以复用样式
@mixin circle($w, $c) {
  width: $w;
  height: $w;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  background: $c;
}

.ceshi {
  @include circle(200px, pink);
}

// 面试官问,你对less和sass说一下
// 1. less和sass都是css预处理语言，它们都有变量 有混入 有父选择器& 有嵌套语法
// 2. 区别
//   1. less的变量是以@符开头的 sass是以$开头
//   2. sass支持条件判断和循环
</style>
